<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无限极下拉树</title>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.min.js" ></script>
<script src="https://cdn.bootcss.com/zTree.v3/3.5.33/js/jquery.ztree.all.min.js" ></script>
<link href="http://cdn.bootcss.com/zTree.v3/3.5.33/css/zTreeStyle/zTreeStyle.min.css" rel="stylesheet">

<style type="text/css">
body{ margin:0; padding:0}
ul,li{ margin:0; padding:0;list-style-type:none}

#input{ border:1px solid #000; width:98%; height:666px}
#input ul{float:left;height:100%;}
#input ul:first-child{border-right:1px solid #F00;position:relative;width:60%;}

#input ul input{display:block;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;height:30px;width:90px}

#inputmore{ border:1px solid #000; width:98%; height:555px}
#inputmore ul{float:left;height:100%;}
#inputmore ul:first-child{border-right:1px solid #F00;position:relative;width:60%;}
#inputmore ul input{display:block;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;height:30px;width:300px}

#inputmore2{ border:1px solid #000; width:98%; height:888px}
#inputmore2 ul{float:left;height:100%;}
#inputmore2 ul:first-child{border-right:1px solid #F00;position:relative;width:60%;}
#inputmore2 ul input{display:block;position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;height:30px;width:90px}


#d1{margin:0;padding:0;position:absolute;left:186px;top:8px;
	 display:block;
        width:0; 
        height:0;
        border-width:6px;
        border-style:solid;
        border-color:#ddd transparent transparent transparent;
    }
	.input{width:100%}
	.input ul{width:500px;margin:0 auto;display:block}
	.input ul li{ display:inline-block}
</style>
</head>

<body>
<div id="input">
<ul><input type="text" onclick="layerztree(this)"></ul>
<ul>
<li>单选下拉树<br><br><br></li>

<li>ID:<span id="id1"></span></li>
<li>NAME:<span id="name1"></span></li>
</ul>
</div>

<div id="inputmore">
<ul><input type="text" onclick="layerztree2(this)"></ul>
<ul>
<li>多选下拉树<br><br><br></li>

<li>ID:<span id="id2"></span></li>
<li>NAME:<span id="name2"></span></li>
</ul>
</div>

</body>
</html>
<script src="http://cdn.bootcss.com/layer/3.1.0/layer.js"  ></script>
<script src="layer_tree.js"></script>

<script >

	//数据
		var zNodes =[
		{name:"父节点1",id:1, open:true},
		{name:"父节点11",id:11,pId:1},
		{name:"父节点12",id:12,pId:1},
		{name:"父节点13",id:13,pId:1, open:true},
		{name:"父节点11-1",id:14,pId:13},
		{name:"父节点2",id:2, open:true},
		{name:"父节点21",id:21,pId:2},
		{name:"父节点22",id:22,pId:2},
		{name:"父节点23",id:23,pId:2},
		{name:"父节点3",id:3, open:true},
		{name:"父节点31",id:31,pId:3},
		{name:"父节点32",id:32,pId:3},
		{name:"节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点节点33",id:33,pId:3},
		];

function layerztree(e)
{
	//数据

	$(e).LayerTree({
		zNodes:zNodes,
		setting:{
			callback:{
				onClick:function(event, treeId, treeNode)
					{
						$("#id1").html(treeNode.id);
						$("#name1").html(treeNode.name);
						$("#input input").val(treeNode.name);
					},
				}
			}
		})
}

function layerztree2(e)
{
	//数据

	$(e).LayerTree({
		zNodes:zNodes,
		setting:{
			check:{
			enable: true,
			chkStyle: "checkbox",
			chkboxType: { "Y": "s", "N": "s" }
			},

			callback:{
    			onCheck: function(event, treeId, treeNode)
				{
					
					var treeObj=$.fn.zTree.getZTreeObj(treeId);
					var node=treeObj.getCheckedNodes(true);
					
					var id=[],name=[];
					$.each( node, function(i, n){
					  id.push(n.id);
					  name.push(n.name);
					});					
					
					$("#id2").text(id.join(","));
					$("#name2").text(name.join(","));
					$("#inputmore input").val(name.join(","));
				},
				beforeClick: function(event, treeId, treeNode){return false}
				}
			}
		})
}
</script>